<template>
    <div>
        <AddBrand ref="brand_ref" @getBrandList="getBrandList" />
        <EditBrand ref="brand_edit" @getBrandList="getBrandList" />
        <div class="com_box">
            <div class="com_tab_content flexbox flexcenter flexbetween">
                <div class="com_tab_box flexbox flexcenter">
                    <div class="com_tab_item" @click="selectTab('/talenttask')">达人任务</div>
                    <div class="com_tab_item active">品牌广告</div>
                </div>
                <el-button type="primary" size="small" icon="el-icon-circle-plus-outline" @click="addBrand">品牌广告</el-button>
            </div>
            <div class="sch_rank">
                <div class="flexbox flexcenter flexbetween">
                    <div class="flexbox flexcenter">
                        <div class="reset_btn" @click="resetFun">重置</div>
                        <div class="rank_line"></div>
                        <img src="../../assets/img/down_icon.svg" alt="" class="rank_down" :class="{'rank_up':!showrank}" @click="showrank = !showrank">
                    </div>
                </div>
            </div>
            <div class="sch_hight flexbox" v-if="showrank">
                <div class="flexbox flexcenter flex">
                    <span class="font_14 color_02" style="margin-right:12px">上线日期</span>
                    <el-date-picker style="width:260px" value-format="yyyy-MM-dd" v-model="brandQuery.getmoney_date" type="daterange" clearable size="small" @change="getBrandList(1)" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期">
                    </el-date-picker>
                </div>
            </div>
        </div>
        <BrandTable :brandQuery="brandQuery" @editBrand="editBrand" :brandData="brandData" @getBrandList="getBrandList" key="brand" v-loading="loading" element-loading-spinner="el-icon-loading" element-loading-background="rgba(0, 0, 0, 0)" />
    </div>
</template>

<script>
import AddBrand from "./AddBrand";
import EditBrand from "./EditBrand";
import BrandTable from "./BrandTable";
export default {
    components: {
        AddBrand,
        EditBrand,
        BrandTable,
    },
    name: "",
    data() {
        return {
            active: 1,
            showrank: true,
            loading: false,
            userList: [],
            brandQuery: {
                page: 1,
                limit: 20,
                project_id: null,
                getmoney_date: [],
            },
            brandData: {
                total: 0,
                setpage: 1,
                tableData: [],
                countData: {},
            },
            tabList: [
                {
                    id: 1,
                    nickname: "达人任务",
                },
                {
                    id: 2,
                    nickname: "品牌广告",
                },
            ],
        };
    },
    created() {
        this.brandQuery.project_id = this.$route.query.project_id;
        this.getBrandList(1);
    },
    methods: {
        selectTab(path) {
            this.$router.push({
                path: path,
                query: {
                    project_id: this.$route.query.project_id,
                    project_name: this.$route.query.project_name,
                },
            });
        },
       
        //获取品牌列表
        async getBrandList(page) {
            this.brandQuery.page = page;
            this.loading = true;
            const { data: res } = await this.$http.post(
                "fxdata/revenue/brandadsList",
                this.brandQuery
            );
            if (res.code !== 200) {
                this.loading = false;
                this.$message.error(res.msg);
                return;
            } else {
                this.loading = false;
                this.brandData.total = res.data.count;
                this.brandData.tableData = res.data.list;
                this.brandData.countData = res.data.total;
            }
        },
       
        // 添加品牌广告
        addBrand() {
            this.$refs.brand_ref.dialogVisible = true;
        },

        // 编辑品牌广告
        editBrand(row) {
            this.$refs.brand_edit.getData(row);
        },
        repeatFind(b, a, id, name) {
            let arr = [];
            for (let i in b) {
                for (let o in a) {
                    if (b[i] == a[o][id]) {
                        arr.push(a[o][name]);
                    }
                }
            }
            return arr.toString();
        },

        // 重置
        resetFun() {
            this.brandQuery.getmoney_date = [];
            this.getBrandList(1);
        },
    },
};
</script>


<style scoped>
.com_tab_content {
    height: 70px;
}
.pro_name {
    font-size: 16px;
    color: #17233d;
    font-weight: bold;
}
.reset_btn {
    margin: 0 12px;
    margin-left: 0;
}
</style>


